import styled from "@emotion/styled";
import { useRecoilState } from "recoil";
import { naviState } from "../../stores/navi";
import logo from "../../assets/logo-small.4a34a883.png";
import logoTitle from "../../assets/logo-dark.1a60eea3.png";
import { BaseFlex } from "../../csscomponents/base";

const MenuTop = () => {
  const [navi] = useRecoilState(naviState);
  return (
    <MenuTopContainer>
      {navi.defaultOpenStatus ? (
        <img src={logo} alt="Logo" width={50} />
      ) : (
        <img src={logoTitle} alt="Logo" width={220} />
      )}
    </MenuTopContainer>
  );
};

export default MenuTop;

const MenuTopContainer = styled(BaseFlex)`
  border-bottom: 1px solid var(${`--menu-second-bg-color`});
  background: var(${`--menu-primary-bg-color`});
  height: 63px;
  text-align: center;
  overflow: hidden;
  color: var(${`--menu-active-text-color`});
  font-size: 28px;
  font-weight: 700;
`;
